<template>
  <div class="gk-layout-container">
    <!--工具栏-->
    <div class="gk-layout-header">
      <s-query perms="wh:batch" @click="findPage2">
        <el-form-item>
          <el-input v-model.trim="filters.batchNo" placeholder="批次"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="filters.itemId" placeholder="编码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="filters.whAreaId" placeholder="请选择物料类别" clearable>
            <el-option v-for="item in classTypes" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width:100;height: 20;" @click="updateStock">更新数量</el-button>
        </el-form-item>
      </s-query>
      <s-reflash excel="true" @exportExcel="exportExcel">

        <el-tooltip content="导入" placement="top">
          <el-button icon="fa fa-database" @click="importExcel" />
        </el-tooltip>
      </s-reflash>

    </div>
    <div class="gk-layout-main">
      <my-table :data="pageResult.content" :loading="loading">
        <el-table-column :label="$t('action.desc')" width="50" header-align="center" align="center">
          <template slot-scope="scope"> {{ scope.$index + 1 }} </template>
        </el-table-column>
        <column prop="itemId" label="物料名称" :formatter="itemFilter" />
        <column prop="batchNo" label="批号" width="250" />
        <column prop="count" label="数量" width="250" />
        <column prop="id" label="单位" width="250" :formatter="selectionFormat1" />
      </my-table>
    </div>

    <div class="toolbar gk-layout-footer" style="padding:10px;">
      <el-pagination layout="total, prev, pager, next, jumper" @current-change="findPage" :current-page="filters.pageNum"
        :page-size="filters.pageSize" :total="pageResult.totalSize" style="float:right;">
      </el-pagination>
    </div>
    <upload-file :key="componentKey" :UpLoadFileVisible="UpLoadFileVisible" @ImportExcelData="ImportExcelData"
      @cancel="cancel" :PercentageValue="this.percentageValue"></upload-file>

  </div>
</template>

<script>
import { getItemName, dictsFormat, getItem } from "@/utils/myUtil"
import KtButton from "@/views/Core/KtButton";
import MyTable from "@/views/Core/MyTable"
import Column from "@/views/Core/Column"
import SDict from "@/components/Kj/SDict"
import SReflash from "@/components/Kj/SReflash"
import SDictForm from "@/components/Kj/SDictForm"
import SQuery from "@/components/Kj/SQuery"
import UploadFile from "@/views/Core/UploadFile"
export default {
  components: {
    Column,
    KtButton,
    MyTable,
    SDict,
    SDictForm,
    SQuery,
    SReflash,
    UploadFile
  },
  data() {
    return {
      size: "small",
      filters: {
        batchNo: "",
        pageNum: 1,
        pageSize: 20
      },
      loading: false,
      classTypes: [],
      pageRequest: {},
      pageResult: {},
      componentKey: 0,
      UpLoadFileVisible: false,
    };
  },
  methods: {
    // 获取分页数据
    findPage2: function (data) {
      this.filters.codes = []
      this.findPage(1)
    },
    findPage: function (data) {
      if (data != -1) {
        data = data || 1;
        this.filters.pageNum = data
      }
      this.$api.batch.findPage(this.filters).then(res => {
        this.pageResult = res.data;
      })
    },
    updateStock: function (data) {
      this.$confirm('确定更新数量吗？', '提示', {}).then(() => {
        this.$api.batch.updateStock(this.filters).then(res => {
          if (res.code = 200) {
            this.$message({ message: this.$t('action.operateSucess'), type: 'success' })
          }
          else {
            this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
          }
        })
      })
    },
    //加载物料类别分类
    findClassTypes: function () {
      this.$api.classify.findPage().then((res) => {
        this.classTypes = res.data.content
      })
    },
    itemFilter: function (row, column, cellValue, index) {

      var item = getItemName(cellValue)
      return item;
    },
    importExcel() {
      this.componentKey += 1;
      this.UpLoadFileVisible = true
    },
    ImportExcelData(excelData) {
  
      // 将上面数据转换成 table需要的数据
      let arr = [];
      excelData.forEach(item => {
        arr.push(item["编码"]);
        this.percentageValue = Math.round(this.percentageValue + 100 / excelData.length)
      });
      this.filters.codes = arr
      this.$api.batch.findPage(this.filters).then(res => {
        this.pageResult = res.data;
        this.UpLoadFileVisible = false
        this.percentageValue = 0
      })


    },
    cancel: function () {
      this.UpLoadFileVisible = false;
      this.percentageValue = 0
    },
    //导出的方法
    exportExcel(xlsExport) {
      this.$api.batch.GetExportList(this.filters).then((res) => {
        const tHeader = ['ID', '编号', '物料名称', '规格', '数量', '单位'];
        const filterVal = ['id', 'code', 'name', 'gg', 'count', 'unit'];
        xlsExport(tHeader, filterVal, res.data, '库存信息导出');
      })
    },
    selectionFormat1: function (row, column, cellValue, index) {
      var i = getItem(row.itemId)
      if (!i) {

        return row.itemId;
      }
      return dictsFormat("units", i.u)
    },

  },
  mounted() {
    this.findPage(1)
  },
  created() {
    this.findClassTypes();
  }
};
</script>

<style scoped></style>